<template>
  <div class="webpack-note-event">
    <h1>{{ message }}</h1>
    <code>
      <pre>
        output: {
            filename: '[name].[hash:8].js',
            path: __dirname + '/built'
        }
      </pre>
    </code>
    <p>hash是compilation对象计算所得，而不是具体的项目文件计算所得,所以以上配置的编译输出文件，所有的文件名都会使用相同的hash指纹。js文件任何一个改动都会影响另外文件的最终文件名。上线后，所有文件的浏览器缓存也全部失效。</p>
    <img src="../../images/webpack/hash.png" class="img-shadow" />
    <code>
      <pre>
        output: {
            filename: '[name].[chunkhash:8].js',
            path: __dirname + '/built'
        }
      </pre>
    </code>
    <p>chunkhash是根据具体模块文件的内容计算所得的hash值，所以某个文件的改动只会影响它本身的hash指纹，不会影响其他文件。</p>
    <img src="../../images/webpack/chunkhash.png" class="img-shadow" />
    <p>webpack默认将js/style文件统统编译到一个js文件中，可以借助extract-text-webpack-plugin将style文件单独编译输出。从这点可以看出，webpack将style文件视为js的一部分。所以默认会打包出相同hash的css。有些情况我们需要css和js 有不同的hash，单独更改style或者js 不去影响对方的hash。</p>
    <p>extract-text-webpack-plugin提供了另外一种hash值：contenthash。顾名思义，contenthash代表的是文本文件内容的hash值，也就是只有style文件的hash值。可以解决js 和css 文件hash相同的问题</p>
    <code>
      <pre>new ExtractTextPlugin('[name].[contenthash].css');</pre>
    </code>
    <img src="../../images/webpack/contenthash.png" class="img-shadow" />
    
    <p class="page-end">The End</p>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component({
        // 所有的组件选项都可以放在这里
    })
    export default class proxy extends Vue {
        // data 在这
        message: string = 'webpack hash 和 chunkhash 以及 css 和 js 的hash'
    }
</script>
<style lang="scss">
.webpack-note-event{
}
</style>